<!-- 车牌号组件 -->
<script setup>
import { reactive, ref, onMounted } from "vue";
const show = ref(false);
const fieldValue = ref(null);
const state = reactive({
  val: "",
  list: null,
  type: "cn",
  inputval: ["", "", "", "", "", "", "", ""],
  activeIndex: 0,
  cn: [
    ["京", "津", "沪", "渝", "冀", "豫", "云", "辽", "黑", "湘"],
    ["皖", "鲁", "新", "苏", "浙", "赣", "鄂", "桂", "甘", "晋"],
    ["蒙", "陕", "吉", "闽", "贵", "粤", "青", "藏", "川", "宁"],
    ["type", "琼", "使", "领", "学", "", "", "", "del"],
  ],
  en: [
    ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"],
    ["Q", "W", "E", "R", "T", "Y", "U", "O", "P"],
    ["A", "S", "D", "F", "G", "H", "J", "K", "L"],
    ["type", "Z", "X", "C", "V", "B", "N", "M", "del"],
  ],
});
onMounted(() => {
  state.list = state.cn;
});

const handleChangeType = () => {
  if (state.type === "en") {
    state.type = "cn";
  } else {
    state.type = "en";
  }
  state.list = state.type === "en" ? state.en : state.cn;
};
const handleDel = () => {
  if (state.inputval[state.activeIndex]) {
    state.inputval[state.activeIndex] = "";
  } else {
    state.inputval[state.activeIndex - 1] = "";
  }
  state.activeIndex = state.activeIndex - 1;
  if (state.activeIndex <= 0) {
    state.activeIndex = 0;
  }
};
// 键盘选中
const handleClickKey = (val) => {
  state.inputval[state.activeIndex] = val;
  state.activeIndex = state.activeIndex + 1;
};
// 输入款选择
const handleClickItem = (val) => {
  state.activeIndex = val;
};
// 清空
const clearsbtn = () => {
  state.inputval.forEach((val, index) => {
    if (val !== "") {
      state.inputval[index] = "";
    }
  });
  state.activeIndex = 0;
};
//确定
const confim = () => {
  state.inputval.forEach((ele, index) => {
    if (ele === "" && index !== 7) {
      console.log("确定要关闭吗？");
    } else {
      fieldValue.value = state.inputval.join("");
      show.value = false;
    }
  });
};
</script>
<template>
  <div>
    <van-field
      v-model="fieldValue"
      readonly
      label="车牌号"
      placeholder="请输入车牌号"
      @focus="() => (show = true)"
    />
    <van-popup v-model:show="show" position="bottom">
      <div>
        <div class="top_buttons">
          <span class="clears" @click="clearsbtn">清空</span>
          <span class="done" @click="confim">确认</span>
        </div>
        <div class="vnp-input-box">
          <ul>
            <li
              v-for="(item, index) in state.inputval"
              :key="index"
              :class="{ active: state.activeIndex === index }"
              @click="handleClickItem(index)"
            >
              <span>{{ item }}</span>
            </li>
          </ul>
        </div>
        <div class="vnp-keys">
          <div
            class="vnp-keys-row"
            v-for="(item, index) in state.list"
            :key="index"
          >
            <div
              class="vnp-btn-key-wrapper"
              v-for="(val, index) in item"
              :key="index"
              :class="{
                'vnp-del-wrapper': val === 'del',
                'vnp-type-wrapper': val === 'type',
              }"
            >
              <van-button
                color="#1c4880"
                v-if="val === 'type'"
                class="vnp-btn-key"
                @click="handleChangeType"
              >
                <span v-if="state.type === 'cn'"
                  >中/<span class="vnp-smaller">英</span></span
                >
                <span v-else><span class="vnp-smaller">中</span>/英</span>
              </van-button>
              <van-button
                color="#1c4880"
                v-else-if="val === 'del'"
                class="vnp-btn-key"
                @click="handleDel"
              >
                <svg
                  viewBox="0 0 32 22"
                  xmlns="http://www.w3.org/2000/svg"
                  class="vnp-delete-icon"
                >
                  <path
                    d="M28.016 0A3.991 3.991 0 0132 3.987v14.026c0 2.2-1.787 3.987-3.98 3.987H10.382c-.509 0-.996-.206-1.374-.585L.89 13.09C.33 12.62 0 11.84 0 11.006c0-.86.325-1.62.887-2.08L9.01.585A1.936 1.936 0 0110.383 0zm0 1.947H10.368L2.24 10.28c-.224.226-.312.432-.312.73 0 .287.094.51.312.729l8.128 8.333h17.648a2.041 2.041 0 002.037-2.04V3.987c0-1.127-.915-2.04-2.037-2.04zM23.028 6a.96.96 0 01.678.292.95.95 0 01-.003 1.377l-3.342 3.348 3.326 3.333c.189.188.292.43.292.679 0 .248-.103.49-.292.679a.96.96 0 01-.678.292.959.959 0 01-.677-.292L18.99 12.36l-3.343 3.345a.96.96 0 01-.677.292.96.96 0 01-.678-.292.962.962 0 01-.292-.68c0-.248.104-.49.292-.679l3.342-3.348-3.342-3.348A.963.963 0 0114 6.971c0-.248.104-.49.292-.679A.96.96 0 0114.97 6a.96.96 0 01.677.292l3.358 3.348 3.345-3.348A.96.96 0 0123.028 6z"
                    fill="currentColor"
                  ></path>
                </svg>
              </van-button>

              <van-button
                v-else
                class="vnp-btn-key"
                :class="{ 'vnp-btn-empty': !val }"
                @click="handleClickKey(val)"
              >
                {{ val }}
              </van-button>
            </div>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<style>
.el-select--large .el-select__wrapper {
  padding: 10px 16px;
}
.van-field__label {
  width: 55px !important;
}
.van-field__value {
  box-sizing: border-box;
  padding: 10px 5px 0px 15px;
  border: 1px solid #dcdfe6;
  border-radius: 5px;
  font-size: 14px;
}

.van-field__label {
  box-sizing: border-box;
  padding: 10px 0px;
  color: #606266;
}
</style>
<style lang="scss" scoped>
.van-cell {
  padding: 0px !important;
}
.top_buttons {
  box-sizing: border-box;
  height: 40px;
  font-size: 16px;
  text-align: right;
  padding-right: 10px;
  padding-top: 5px;
  .done {
    box-sizing: border-box;
    background-color: #1c4880;
    color: #fff;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 3px;
  }
  .clears {
    box-sizing: border-box;
    background-color: #ff3b30;
    color: #fff;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 3px;
    margin-right: 20px;
  }
}

.vnp-input-box {
  padding: 10px 0px;
  border: 1px solid #d8d8d8;
  border-radius: 2px;
  color: #8d8d8d;
  font-size: 15px;
  text-align: center;
  margin: 10px;

  ul {
    display: flex;
  }
  li {
    flex: 1;
    border-right: 1px solid #eaeaea;
    height: 28px;
    line-height: 28px;

    &:first-child {
      border-color: #a6a6a6;
      flex: 1.3;
    }
    &:last-child {
      border: none;
    }
    &.active {
      color: #1989fa;

      > span {
        height: 100%;
        width: 20px;
        display: inline-block;
        border-bottom: 1px solid #1989fa;
      }
    }
  }
}
.vnp-keys {
  background: #f2f3f5;
  padding: 10px 3px 22px 3px;

  .vnp-keys-row {
    display: flex;
    justify-content: center;
  }
  .vnp-btn-key-wrapper {
    flex: 0 1 calc((100% - 6px * 10) / 10);
    padding: 3px;
    box-sizing: content-box;

    &.vnp-del-wrapper,
    &.vnp-type-wrapper {
      flex: 1;
    }
    &.vnp-type-wrapper {
      .vnp-smaller {
        color: #999;
        font-size: 12px;
      }
    }

    .vnp-btn-key {
      padding: 0;
      width: 100%;
      border-radius: 4px;
    }
    .vnp-btn-empty {
      background: transparent;
      border: none;
    }
    .vnp-delete-icon {
      width: 18px;
      vertical-align: middle;
    }
  }
}
</style>
